<template>
  <div>
    <div v-show="articelStatus == false">
      <el-row style="margin-bottom:10px">
        <el-col :span="8" >
          <h4 style="margin:0"> 
            <span>Banner管理</span>
            <el-button  type="success" class="addBtn" @click="goEdit(0)" v-if="userRole.BN_101001"><i class="el-icon-plus"></i>Banner</el-button>
          </h4>
        </el-col>
        <el-col :span="16" style="text-align:right">
          <el-input v-model="sheachValue" style="width:300px" placeholder="输入搜索内容"></el-input>
          <el-button type="primary" @click="seachFun">搜索</el-button>
        </el-col>
      </el-row>
      
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <my-banner v-if="navStatus == -1" :navStatus="navStatus" ref="children" @goEdit="goEdit"></my-banner>
        </el-tab-pane>

        <el-tab-pane label="上线" name="second">
          <my-banner v-if="navStatus == 0" :navStatus="navStatus" ref="children" @goEdit="goEdit"></my-banner>
        </el-tab-pane>

        <el-tab-pane label="下线" name="third">
          <my-banner v-if="navStatus == 1" :navStatus="navStatus" ref="children" @goEdit="goEdit"></my-banner>
        </el-tab-pane>

      </el-tabs>
    </div>
    <div v-if="articelStatus">
      <editor-banner @breakFun="breakFun"  :dataBanner="dataBanner"></editor-banner>
    </div>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  import Http from '@/Http/Http'
  import getTime from '@/Http/getTime'
  import myBanner from './myBanner'
  import editorBanner from './Articel/editorBanner'


  export default {
    data() {
      return {
        userRole:JSON.parse(sessionStorage.getItem('userSolt')),
        navStatus:-1,
        activeName: 'first',
        articelStatus:false,
        dataBanner:'',
        sheachValue:'',
      }
    },
    components:{
      myBanner,
      editorBanner
    },
    
     mounted() {
      var obj = document.getElementById('centerbox')
      obj.addEventListener('scroll', this.handleScroll,true)
    },
    destroyed(){
      
      var obj = document.getElementById('centerbox')
      obj.removeEventListener('scroll', this.handleScroll,true)
    },
    methods: {
      //---------------------
      handleScroll() {
        var scollobj = document.getElementById('centerbox');
        var scrollTop = scollobj.scrollTop;
        const obj = document.getElementById('tab-first');
        const myobj = obj.parentNode.parentNode;
        if(scrollTop> 32){
          myobj.style.position = 'fixed';
          myobj.style.top = 0;
        } else {
          myobj.style.position = 'relative';
        }
      },
      handleClick(tab) {
        this.navStatus = Number(tab.index)-1;
      },

      //编辑 添加返回方法
      breakFun() {
        this.articelStatus = false;
      },

      timeFun(val) {
        return getTime(val)
      },
      goEdit(val){
        val ? this.dataBanner = val : this.dataBanner = '';
        this.articelStatus = true;
      },
      
     
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
       //搜索
      sheachFun(val){
        
      },
      //排序
      sortBtn() {
        this.sortStatus = true
      },
      sorlCheckStatus(){
        this.sortStatus = false
      },
     
      //搜索
      seachFun() {
        this.$refs.children.sheachFun(this.sheachValue)
      }
    }
  }
</script>